import Link from "next/link";
import moment from "moment";
import React from "react";
import "./index.scss";

const dealList = (list) => {
	const obj = {};
	list.forEach(item => {
		const day = moment(item.created_at).format("YYYY.MM.DD").toString();
		if (!obj[day]) {
			obj[day] = [];
		}
		obj[day].push(item);
	});
	return obj;
};



const DayBlock = (props) => {
	const { data, style } = props;
	return (
		<div className="item-block" style={style}>
			{data.map(item => (
				<Link href={"/blogs/" + item._id} key={item._id}>
					<div className="item">
						<h2 className="title">{item.title}</h2>
						{/* <div className="info">
							<div className="tags">
								{item.tags.map((im, i) => (<span className="tag" key={i}>{im}</span>))}
							</div>
							<div className="meta">
								<span className="date">{moment(item.created_at).format("YYYY/MM/DD")}</span>
								<i className="iconfont">&#xe60a;</i><span className="count">{item.lookCount}</span>
							</div>
						</div> */}
					</div>
				</Link>
			))}
		</div>
	);
};


const BlogList = (props) => {
	const { data } = props;
	const listObj = dealList(data);
	return (
		<div className="blog-list">
			{Object.keys(listObj).map((key, index) => (
				<li className="blog-item" key={index}>
					<div className="time">
						{key}
					</div>
					<DayBlock data={listObj[key]} />
				</li>
			))}
		</div>
	);
};

export default BlogList;